<template>
    <van-nav-bar left-arrow fixed title="我的收藏列表" @click-left="router.back()" />
    <div style="height: 46px;"></div>
    <van-swipe-cell v-for="item in product">
        <van-card @click="jump(item.id)" :key="item.id" :price="item.price" :desc="item.colls+'人收藏'" :title="item.name"
            :thumb="item.avatars_cdn[0]">
            <template #footer>
                <van-button size="mini" @click.stop="jumpTypelist(item.typeid)">相关商品</van-button>
            </template>
        </van-card>
        <!-- 侧滑块 => 向左滑 -->
        <template #right>
            <van-button square text="删除" @click="onDelete(item.id)" type="danger" class="delete-button" />
        </template>
    </van-swipe-cell>
</template>

<script setup>
import { useRouter } from 'vue-router';
import { onMounted, reactive } from 'vue'
import apiList from '@/api'
import { useUserStore } from '@/store/user.js'
import resJudge from '@/hooks/res.js'

const userStore = useUserStore()
const router = useRouter()
const product = reactive([])

onMounted(async () => {
    getCollData()
})

async function getCollData() {
    product.length = 0//如果有数据就清除之前的数据重新获取
    let res = await apiList.collection({ busid: userStore.userInfo.id })
    if (res.code == 1) {
        res.data.list.forEach(item => {
            res.data.coll.forEach(e => {
                if (e.proid == item.product.id) {
                    item.product.colls = e.colls
                }
            })
            product.push(item.product)
        })
    }
}

function jump(proid) {
    router.push({ path: '/product/product/info', query: { proid } })
}

function jumpTypelist(typeid) {
    router.push({ path: '/product/product/index', query: { typeid } })
}

async function onDelete(proid) {
    let res = await apiList.ProductCollection({ busid: userStore.userInfo.id, proid, flag: 1 })
    resJudge(res)
    getCollData()
}
</script>

<style lang="scss" scoped>
.delete-button {
    height: 100%;
}
</style>